<template>
  <div class="world_sick">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'world_sick',
  data() {
    return {
      
    }
  },
  mounted() {
    this.getTable()
  },
  methods: {
    getTable() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom, 'dark');
      var option;

      setTimeout(function () {

          option = {
              title: {
                text: '世界疫情趋势',
                textStyle: {
                  fontSize: 30
                },
                left: 'center',
                top: 10
              },
              backgroundColor: false,
              color: ["#4992ff","#7cffb2","#fddd60","#ff6e76"],
              legend: {
                textStyle: {
                  fontSize: 13
                },
                top: 50
              },
              tooltip: {
                  trigger: 'axis',
                  showContent: false
              },
              dataset: {
                  source: [
                      ['product', '2020.2', '2020.5', '2020.8', '2020.11', '2021.1', '2021.4'],
                      ['美国', 16.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                      ['印度', 21.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                      ['日本', 10.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                      ['中国', 85.2, 67.1, 41.2, 18, 11.9, 4.1]
                  ]
              },
              xAxis: {type: 'category'},
              yAxis: {gridIndex: 0},
              grid: {
                top: '60%',
              },
              series: [
                  {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                  {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                  {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                  {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                  {
                      type: 'pie',
                      id: 'pie',
                      radius: '30%',
                      center: ['50%', '35%'],
                      emphasis: {focus: 'data'},
                      label: {
                          formatter: '{b}: {@2012} ({d}%)'
                      },
                      encode: {
                          itemName: 'product',
                          value: '2012',
                          tooltip: '2012'
                      }
                  }
              ]
          };

          myChart.on('updateAxisPointer', function (event) {
              var xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                  var dimension = xAxisInfo.value + 1;
                  myChart.setOption({
                      series: {
                          id: 'pie',
                          label: {
                              formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                          },
                          encode: {
                              value: dimension,
                              tooltip: dimension
                          }
                      }
                  });
              }
          });

          myChart.setOption(option);

      });

      option && myChart.setOption(option);
    } 
  }
}
</script>

<style scoped>
  #main {
    width: 1300px;
    height: 670px;
  }
</style>